/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import {
  Form,
  Input,
  InputNumber,
  Radio,
  TreeSelect,
  Select,
  Collapse,
  Button,
  message,
  Card,
  Result,
  Row,
  Col,
  Steps,
  Typography
} from 'antd';
import {connect} from 'dva';
import './index.less'
const { Paragraph } = Typography;
const FormItem = Form.Item;
const { Step } = Steps;
const Option = Select.Option;
class EditUserArchives extends Component {
  constructor(props) {
    super(props);
    this.formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 6},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 18},
        sm: {span: 16},
      }
    };
    this.formItemLayoutWithLabel2 = {
      labelCol: {
        xs: {span: 6},
        sm: {span: 11},
      },
      wrapperCol: {
        xs: {span: 18},
        sm: {span: 13},
      }
    };
    this.state = {
      current:0,
      amount:0
    };
  }
  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }

  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }
  renderInfo=()=>{
    const { getFieldDecorator, validateFields } = this.props.form;
    return    <Form onSubmit={this.handleSubmit}>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主姓名'}
        {...this.formItemLayoutWithLabel}
      >
        户主姓名
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主编号'}
        {...this.formItemLayoutWithLabel}
      >
        45811521045154
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主手机'}
        {...this.formItemLayoutWithLabel}
      >
        13265958173
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主地址'}
        {...this.formItemLayoutWithLabel}
      >
        <Paragraph ellipsis>
          户主地址户主地址户主地址户主地址户主地址
        </Paragraph>
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'水表编号'}
        {...this.formItemLayoutWithLabel}
      >
        13265958173
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'用水性质'}
        {...this.formItemLayoutWithLabel}
      >
        商业有下水
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'水价'}
        {...this.formItemLayoutWithLabel}
      >
        ￥12.7
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'余额'}
        {...this.formItemLayoutWithLabel}
      >
        ￥0.56
      </FormItem>
      <FormItem
        label={'充值方式'}
        {...this.formItemLayoutWithLabel2}
      >
        {getFieldDecorator('sex', {
          initialValue: 1,
          rules: [
            { required: true, message: '请选择充值方式' }
          ],
        })(
          <Select  style={{width:'150px'}}>
            { [{key:1,value:'现金'},{key:2,value:'微信二维码'}].map(item => <Option key={item.key} value={item.key}>{item.value}</Option>) }
          </Select>
        )}
      </FormItem>
      <Form.Item    {...this.formItemLayoutWithLabel2}
                    label="充值金额">
        {getFieldDecorator('amount', {
          initialValue: this.state.amount,
          rules: [
            { required: true, message: '请输入转账金额' },
            {
              pattern: /^(\d+)((?:\.\d+)?)$/,
              message: '请输入合法金额数字',
            },
          ],
        })(<Input style={{width:'150px'}} onChange={(e)=>{
          this.setState({
            amount:e.target.value
          })
        }} prefix="￥" placeholder="请输入金额" />)}
      </Form.Item>
    </Form>
  }
  renderInfo2=()=>{
    const { getFieldDecorator, validateFields } = this.props.form;
    return    <Form onSubmit={this.handleSubmit}>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主姓名'}
        {...this.formItemLayoutWithLabel}
      >
        户主姓名
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主编号'}
        {...this.formItemLayoutWithLabel}
      >
        45811521045154
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主手机'}
        {...this.formItemLayoutWithLabel}
      >
        13265958173
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主地址'}
        {...this.formItemLayoutWithLabel}
      >
        <Paragraph ellipsis>
          户主地址户主地址户主地址户主地址户主地址
        </Paragraph>
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'水表编号'}
        {...this.formItemLayoutWithLabel}
      >
        13265958173
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'用水性质'}
        {...this.formItemLayoutWithLabel}
      >
        商业有下水
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'水价'}
        {...this.formItemLayoutWithLabel}
      >
        ￥12.7
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'余额'}
        {...this.formItemLayoutWithLabel}
      >
        ￥0.56
      </FormItem>
      <Form.Item    {...this.formItemLayoutWithLabel2}
                    label="充值方式">
        <h3>现金</h3>
      </Form.Item>
      <Form.Item    {...this.formItemLayoutWithLabel2}
                    label="充值金额">
        <h1>￥{this.state.amount}</h1>
      </Form.Item>
    </Form>
  }
  renderInfo3=()=>{
    return   <Result
      status="success"
      title="充值成功"
      subTitle="点击下方按钮打印账单"
    />
  }
  render() {

    const steps = [
      {
        title: '填写充值金额',
        content: this.renderInfo(),
      },
      {
        title: '提交充值金额',
        content: this.renderInfo2()
      },
      {
        title: '打印账单',
        content: this.renderInfo3(),
      },
    ];
    const { current } = this.state;
    return (
      <div>
        <Steps current={current}>
          {steps.map(item => (
            <Step key={item.title} title={item.title} />
          ))}
        </Steps>
        <div className="steps-content">{steps[current].content}</div>
        <div className="steps-action" style={{textAlign:'center',marginTop:'10px'}}>

          {current === 0 && (
            <Button type="primary" onClick={() => this.next()}>
              下一步
            </Button>
          )}
          {current === 1 && (
            <Fragment>
              <Button  onClick={() => this.prev()}>
                上一步
              </Button>
              <Button type="primary" style={{marginLeft:'10px'}} onClick={() => this.next()}>
                提交
              </Button>
            </Fragment>

          )}
          {current ===2 && (
            <Button style={{ marginLeft: 8 }} type="primary"  onClick={() => this.prev()}>
              打印账单
            </Button>
          )}
        </div>
      </div>
    );
  }
}

const EditUserArchivesFormWrap = Form.create()(EditUserArchives);
export default connect()(EditUserArchivesFormWrap);
